<template>
  <div id="registerContainer">
    <div class="register-title">
      <span class="title">注册</span>
    </div>
    <div class="register-box">
      <el-form :model="registerForm" status-icon :rules="registerRules" ref="registerForm" label-width="0px">
        <el-form-item prop="nickname">
          <el-input type="text" v-model="registerForm.nickname" autocomplete="off" placeholder="昵称"></el-input>
        </el-form-item>
        <el-form-item prop="sex">
          <el-select v-model="registerForm.sex" placeholder="性别" style="width:100%;">
            <el-option label="男" :value="1"></el-option>
            <el-option label="女" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="registerForm.password" autocomplete="off" placeholder="密码 (6-16个字符组成，区分大小写)"></el-input>
        </el-form-item>
        <el-form-item prop="reppassword">
          <el-input type="password" v-model="registerForm.reppassword" autocomplete="on" placeholder="确认密码"></el-input>
        </el-form-item>
        <el-form-item prop="email">
          <el-input type="text" v-model="registerForm.email" autocomplete="off" placeholder="邮箱"></el-input>
        </el-form-item>
        <el-form-item prop="captcha">
          <el-input type="text" v-model="registerForm.captcha" autocomplete="off" placeholder="验证码">
            <sendEmailCaptcha slot="append" :email="registerForm.email" reUtype="user" @setCpatchaMD5="setMd5"></sendEmailCaptcha>
          </el-input>
        </el-form-item>
        <el-form-item prop="type">
          <el-select v-model="registerForm.type" placeholder="用户角色" style="width:100%;">
            <el-option v-for="item in reUtype" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="inviteCode" v-if="registerForm.type == 2">
          <el-input type="text" v-model="registerForm.inviteCode" autocomplete="off" placeholder="专家邀请码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="check">同意协议</el-checkbox>
          <el-link :underline="false" @click="showAgreeMent = !showAgreeMent" type="primary" style="float:right">查看用户隐私协议</el-link>
        </el-form-item>
        <el-form-item>
          <el-button class="autoWidthButton" type="primary" @click="submitRegist">注册</el-button>
        </el-form-item>
        <el-form-item>
          <el-link :underline="false" @click="toLogin" style="float:right">已有账号?去登录</el-link>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog title="用户隐私协议" :visible.sync="showAgreeMent" width="30%">
      <p>
        本软件会在您自愿选择服务或提供信息的情况下收集您的个人信息，并将这些信息进行整合，以便向您提供更好的用户服务。请您在注册时及时、详尽及准确的提供个人资料，并不断更新注册资料，符合及时、详尽准确的要求。所有原始键入的资料将引用为注册资料。如果因注册信息不真实而引起的问题，由您自行承担相应的后果。请您不要将您的帐号、密码转让或出借予他人使用。如您发现您的帐号遭他人非法使用，应立即通知本软件。因黑客行为或用户的保管疏忽导致帐号、密码遭他人非法使用，本软件不承担责任。
      </p>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="showAgreeMent = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import sendEmailCaptcha from "@/components/public/sendEmailCaptcha"
import { userRegist } from "@/api/front/user"
import { mapGetters, mapMutations } from 'vuex'
export default {
  data() {
    return {
      check: true,
      reUtype: [
        { label: '普通用户', value: 1 },
        { label: '专家用户', value: 2 }
      ],
      registerForm: {
        nickname: '',
        password: '',
        reppassword: '',
        email: '',
        captcha: '',
        type: 1,
        inviteCode: '',
        sex: 1
      },
      registerRules: {
        nickname: [{ required: true, message: '请输入昵称', blur: 'change' }, { min: 2, max: 16, message: '最短2个字符，最长16个字符', trigger: 'change' }],
        password: [{ required: true, message: '请输入密码', blur: 'change' }, { min: 6, max: 16, message: '最短2个字符，最长16个字符', trigger: 'change' }],
        reppassword: [{ required: true, message: '请输入确认密码', blur: 'change' }, { min: 6, max: 16, message: '最6个字符，最长16个字符', trigger: 'change' }],
        email: [{ required: true, message: '请输入邮箱', blur: 'change' }, { min: 6, max: 50, message: '最小6个字符，最长50个字符', trigger: 'change' }],
        captcha: [{ required: true, message: '请输入验证码', blur: 'change' }, { min: 6, max: 6, message: '验证码长度为6个字符', trigger: 'change' }],
      },
      showAgreeMent:false
    }
  },
  computed: {
    ...mapGetters({
      userMsg: 'user/getUserMsg',
      userType: 'user/getUserType'
    })
  },
  components: {
    sendEmailCaptcha
  },
  methods: {
    ...mapMutations({
      setUserMsg: 'user/setUserMsg',
      setUserType: 'user/setUserType'
    }),
    //查看协议
    toAgreement() {

    },
    //去登陆
    toLogin() {
      this.$router.push({
        path: '/user/login'
      })
    },
    setMd5(md5) {
      this.registerForm.captchaMD5 = md5
    },
    //注册
    submitRegist() {
      this.$refs['registerForm'].validate((valid) => {
        if (valid) {
          userRegist(this.registerForm, (res) => {
            if (res.code == 200) {
              this.setUserMsg(res.data)
              this.$router.push({
                path: '/uIndex/main'
              })
            }
          }, true)
        } else {
          return false;
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>